<template>
  <!-- 行知历 -->
  <main class="wss-container">
    <div class="label-box-content">
      <div class="knownAction-box">
        <el-row :gutter="20" type="flex">
          <el-col
            :span="8"
            class="knact-left noPd"
            :class="isActBtn == 3||isActBtn == 4 ? '' : 'noScoll'"
          >
            <NewCard :isright="true">
              <!-- 标题 -->
              <template slot="title">
                <div class="ka-title">OKR</div>
              </template>
              <!-- 右边 -->
              <template slot="right">
                <el-button-group class="btnGroup" v-if="!searchType">
                  <el-button
                    size="mini"
                    round
                    :class="isActBtn == 3 ? 'isActive' : ''"
                    @click="isActBtn = 3"
                    >目标</el-button
                  >
                  <el-button
                    size="mini"
                    round
                    :class="isActBtn == 1 ? 'isActive' : ''"
                    @click="isActBtn = 1"
                    >今天</el-button
                  >
                  <el-button
                    size="mini"
                    round
                    :class="isActBtn == 2 ? 'isActive' : ''"
                    @click="isActBtn = 2"
                    >本周</el-button
                  >
                  <el-button
                    size="mini"
                    round
                    :class="isActBtn == 4 ? 'isActive' : ''"
                    @click="isActBtn = 4"
                    v-if="$store.state.user.userInfo.whereCircleId==$store.state.user.circleId"
                    >管理</el-button
                  >
                </el-button-group>
                <div class="searchInput" v-else>
                  <el-input prefix-icon="el-icon-search" size="small" v-model="keyWord" @keyup.enter.native="submit" placeholder="请输入内容" clearable></el-input>
                </div>
                <div class="btnGroup">
                  <el-button
                    size="mini"
                    round
                    @click="searchHandler(0,$event)"
                    v-if="!searchType"
                    class="search"
                    >
                      <!-- 显示搜索图标 -->
                    <svg-icon icon-class="searchon"  />  
                    </el-button
                  >
                 <div   v-else>
                    <el-button
                      size="mini"
                      round
                      @click="submit"
                      class="search seach_color"
                    >搜索</el-button>
                     <el-button
                    size="mini"
                    round
                    class="search"
                    @click="searchHandler(1,$event)"
                  
                    >
                      <svg-icon icon-class="searchoff" />
                     
                    </el-button
                  >
                 </div>
                </div>
              </template>

              <!-- 今日任务 -->
              <Today v-if="isActBtn == 1"></Today>
              <!-- 本周任务 -->
              <WeekTask v-else-if="isActBtn == 2"></WeekTask>
              <!-- 目标 -->
              <Target v-else-if="isActBtn == 3" @sendTargetData="sendTargetData"></Target>
              <!-- 管理 -->
              <Manage v-else-if="isActBtn == 4"></Manage>
              <!-- 我的目标 -->
              <!-- <MyTarget v-else-if="isActBtn==3" @sendTarget="sendTargetData"></MyTarget> -->
              <!-- 参与目标 -->
              <!-- <PartTaeget v-else-if="isActBtn==4" @sendTarget="sendTargetData"></PartTaeget> -->
            </NewCard>
          </el-col>
          <el-col :span="16" class="table-col">
            <NewCard :isright="true">
              <!-- 标题 -->
              <template slot="title">
                <div class="ka-title" v-if="selectObj.id">
                  {{ selectObj.name }}({{ selectObj.rate }})
                  <!-- <div class="ka-tIcon">
                                    <div class="ka-item" @click="clickFile"><svg-icon icon-class="attachment_inactivity"/></div>
                                    <div class="ka-item"><svg-icon icon-class="video_inactivity"/></div>
                                    <div class="ka-item"><svg-icon icon-class="voice_inactivity"/></div>
                                    <div class="ka-item"><svg-icon icon-class="wchat_inactivity"/></div>
                                </div> -->
                </div>
                <div class="ka-title" v-else>请选择目标</div>
              </template>
              <!-- 右边 -->
              <template slot="right">
                <div class="ka-left">基于目标的任务</div>
              </template>

              <!-- 表格 -->
              <Table :selectObj="selectObj"></Table>
            </NewCard>
          </el-col>
        </el-row>
      </div>

      <!-- 附件列表显示隐藏 -->
      <FileList ref="fileDrawer" :selectObj="selectObj"></FileList>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import Today from "@/BMViews/views/knownAction/task/today/index.vue";
import WeekTask from "@/BMViews/views/knownAction/task/weekTask/index.vue";
import Target from "@/BMViews/views/knownAction/target/index.vue";
import Table from "./table/index.vue";
import Manage from "./manage/index.vue";
import FileList from "./fileList/index.vue";
export default {
  name: "knownAction",
  components: {
    NewCard,
    Today,
    WeekTask,
    Target,
    Table,
    FileList,
    Manage
  },
  data() {
    return {
      isActBtn: 1, //1今天 2目标
      selectObj: {}, //当前选中的一条数据
      searchType: false, //是否展示搜索框
      keyWord:'',//搜索关键词
    };
  },
  methods: {
    // 点击附件
    clickFile() {
      this.$refs.fileDrawer.openDrawer();
    },

    // 接受传过来的目标数据
    sendTargetData(item) {
      this.selectObj = item; //传递的数据
    },
    //点击搜索按钮回调
    searchHandler(...arg){
      
        if(arg[0] == 0){//判断当前点击的是显示还是隐藏按钮
            this.searchType = true
        }else{
            this.keyWord = ''
            this.searchType = false
        }
    },
    // 点击搜索回调
    submit(){
      this.$bus.$emit('refLeftList',this.keyWord)
      // if(this.keyWord.trim()){}
    }
  },
};
</script>

<style lang="scss" scoped>
// 公共样式
.label-box-content {
  height: 100%;
  .knownAction-box {
    height: 100%;
    .knact-left {
      ::v-deep .top {
        .right {
          flex: 3;
        }
      }
    }
    .el-row {
      height: 100%;
      ::v-deep .el-card__body {
        position: relative;
        height: 100%;
        padding-bottom: 0;
        > div {
          height: calc(100% - 45px);
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 0;
          }
        }
      }
      .noScoll {
        ::v-deep .el-card__body {
          > div {
            overflow-y: hidden;
          }
        }
      }
      .noPd {
        ::v-deep .el-card__body {
          padding: 0;
          .top {
            padding: 0 30px;
          }
        }
      }
      .table-col {
        ::v-deep .el-card__body {
          .top {
            h1 {
              margin: 10px 0;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
}

// 标题
.ka-title {
  display: flex;
  align-items: center;
  span {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    margin-left: 10px;
  }
  .ka-tIcon {
    display: flex;
    margin: 0 5px;
    .ka-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background-color: #ededed;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
      svg {
        font-size: 13px;
      }
    }
  }
}
// 按钮组
.btnGroup {
  .search{
     margin-left: 5px !important;
  }
  .seach_color{
    color: #f87a23 !important;
    border-color: #f87a23 !important;

  }
  .el-button {
    padding: 4px 8px;
   
    &:hover {
      border-color: #dcdfe6;
      background: #ffffff;
      color: #606266;
    }
    &:focus {
      border-color: #dcdfe6;
      background: #ffffff;
      color: #f87a23;
    }
  }
  .isActive {
    color: #f87a23;
    &:hover {
      color: #f87a23;
    }
  }
}
// 搜索框样式
.searchInput{
  .el-input{
    width: 150px;
    ::v-deep .el-input__inner{
      height: 28px;
      line-height: 28px;
    }
    ::v-deep .el-input__prefix{
      top: -2px;
    }
  }
}
// 标题右边文字
.ka-left {
  font-size: 12px;
  font-weight: 400;
  color: #999;
  background-color: #f7f7f7;
  border-radius: 17px 0px 0px 17px;
  padding: 6px 20px;
}
</style>